{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Sergey Pozhilov (GetTemplate.com)">

    <title>Contact us - Progressus Bootstrap template</title>

    <link rel="shortcut icon" href="{% static 'maintenance/images/gt_favicon.png' %}">

    <link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="{% static 'maintenance/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'maintenance/css/font-awesome.min.css' %}">

    <!-- Custom styles for our template -->
    <link rel="stylesheet" href="{% static 'maintenance/css/bootstrap-theme.css' %}" media="screen">
    <link rel="stylesheet" href="{% static 'maintenance/css/main.css' %}">
    <link rel="stylesheet" href="{% static 'maintenance/plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <link rel="stylesheet"
          href="{% static 'maintenance/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
	<script src="{% static 'maintenance/js/html5shiv.js' %}"></script>
	<script src="{% static 'maintenance/js/respond.min.js' %}"></script>
	<![endif]-->
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        #nav {
            height: 50px;
            background-color: #46474a;
        }

        #nav ul li {
            width: 120px;
            float: left;
        }

        #nav ul li a {
            display: block;
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            font-size: 18px;
            /* font-weight: bold; */
            color: white;
            text-align: center;
        }

        #nav ul li a:hover {
            background-color: white;
            color: #46474a;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
    <style type="text/css">
        li.margin {
            margin-left: 50px;
        }
    </style>
</head>

<body>
<div id="nav">
    <ul>
        <li class="margin"><img src="/static/images/logo.png" style="width: 87.4px;height: 50px;"></li>
        <li><a href="{% url 'purchase_index' %}">购物商城</a></li>
        <li><a href="/moment/">车友圈</a></li>
        <li><a href="#">充电规划</a></li>
        <li><a href="/infomation/">智能客服</a></li>
        <li><a href="/repair/">维修保养</a></li>
        {% if "info" in request.session.keys %}
        <li class="dropdown">
            <a href="#">
                我的</a>
            <div class="dropdown-content">
                <a href="{% url 'show_order' %}" style="color: #46474a;font-size: 17px;">购物订单</a>
                <a href="/repair/list/" style="color: #46474a;font-size: 17px;">维修订单</a>
                <a href="#" style="color: #46474a;font-size: 17px;">个人信息</a>
                <a href="/signout/" style="color: #46474a;font-size: 17px;">注销</a>
            </div>
        </li>
        {% else %}
        <li><a href="/signin/">登录 / 注册</a></li>
        {% endif %}
    </ul>
</div>


<!-- container -->
<div class="container">

    <ol class="breadcrumb">
        <li><a href="/index/">主页</a></li>
        <!-- <li><a href="/repair/">维修保养服务</a></li> -->
        <li class="active">我的订单</li>

    </ol>

    <div class="row">

        <!-- Article main content -->
        <article class="col-sm-9 maincontent">
            <header class="page-header">
                <h1 class="page-title">我的订单</h1>
            </header>

            <p>
                以下是您已提交的订单，您可以修改订单信息或申请退款
            </p>
            <br>


            {% for order in order_list %}
                <div class="panel panel-default">
                    <div class="panel-heading">我的订单</div>
                    <div class="panel-body" style="margin-left: 20px;line-height: 30px">
                        <span>订单号：</span>{{ order.order_id }}<br>
                        <span>收货人：</span>{{ order.order_recv }}<br>
                        <span>收获地址：</span>{{ order.order_addr }}<br>
                        <span>联系电话：</span>{{ order.order_tele }}<br>
                        <span>运费：</span>{{ order.order_fee }}<br>
                        <span>订单备注：</span>{{ order.order_extra }}<br>
                        <span>订单状态：</span>{{ order.order_status }}<br>
                    </div>

                    <div style="text-align: right;height: 50px;padding-right: 20px">
                        <input uid="{{ obj.id }}" class="btn btn-primary btn-xs btn-edit" type="button"
                               value="编辑"
                               style="width:100px;height:35px;font-size:15px;margin-right: 10px">
                        <input uid="{{ obj.id }}" class="btn btn-danger btn-xs btn-delete"
                               type="button"
                               value="申请退款"
                               style="width:100px;height:35px;font-size:15px">
                    </div>

                </div>
            {% endfor %}

            <ul class="pagination">
                {{ page_string }}
            </ul>

            <br>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">编辑</h4>
                        </div>
                        <div class="modal-body">

                            <form id="formAdd">
                                <div class="clearfix">
                                    {% for field in form %}
                                        <div class="col-xs-6">
                                            <div class="form-group" style="position: relative;margin-bottom: 20px;">
                                                <label>{{ field.label }}</label>
                                                {{ field }}
                                                <span class="error-msg" style="color: red;position: absolute;"></span>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </form>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                            <button id="btnSave" type="button" class="btn btn-primary">保 存</button>
                        </div>
                    </div>
                </div>
            </div>


            <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="alert alert-danger alert-dismissible fade in" role="alert">
                        <h4>是否确定取消预约？</h4>
                        <p style="margin: 10px 0;"> 取消预约后无法恢复，如需维修/保养请重新预约。</p>
                        <p style="text-align: right;">
                            <button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                        </p>
                    </div>

                </div>
            </div>


        </article>
        <!-- /Article -->

        <!-- Sidebar -->
        <aside class="col-sm-3 sidebar sidebar-right">

            <div class="widget">
                <h4>Address</h4>
                <address>
                    2002 Holcombe Boulevard, Houston, TX 77030, USA
                </address>
                <h4>Phone:</h4>
                <address>
                    (713) 791-1414
                </address>
            </div>

        </aside>
        <!-- /Sidebar -->

    </div>
</div>

<section class="container-full top-space">
</section>


<footer id="footer">

    <div class="footer1">
        <div class="container">
            <div class="row">

                <div class="col-md-3 widget">
                    <h3 class="widget-title">Contact</h3>
                    <div class="widget-body">
                        <p>+234 23 9873237<br>
                            <a href="mailto:#">some.email@somewhere.com</a><br>
                            <br>
                            234 Hidden Pond Road, Ashland City, TN 37015
                        </p>
                    </div>
                </div>

                <div class="col-md-3 widget">
                    <h3 class="widget-title">Follow me</h3>
                    <div class="widget-body">
                        <p class="follow-me-icons clearfix">
                            <a href=""><i class="fa fa-twitter fa-2"></i></a>
                            <a href=""><i class="fa fa-dribbble fa-2"></i></a>
                            <a href=""><i class="fa fa-github fa-2"></i></a>
                            <a href=""><i class="fa fa-facebook fa-2"></i></a>
                        </p>
                    </div>
                </div>

                <div class="col-md-6 widget">
                    <h3 class="widget-title">Text widget</h3>
                    <div class="widget-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, dolores, quibusdam
                            architecto voluptatem amet fugiat nesciunt placeat provident cumque accusamus itaque
                            voluptate modi quidem dolore optio velit hic iusto vero praesentium repellat commodi ad id
                            expedita cupiditate repellendus possimus unde?</p>
                        <p>Eius consequatur nihil quibusdam! Laborum, rerum, quis, inventore ipsa autem repellat
                            provident assumenda labore soluta minima alias temporibus facere distinctio quas adipisci
                            nam sunt explicabo officia tenetur at ea quos doloribus dolorum voluptate reprehenderit
                            architecto sint libero illo et hic.</p>
                    </div>
                </div>

            </div> <!-- /row of widgets -->
        </div>
    </div>

    <div class="footer2">
        <div class="container">
            <div class="row">

                <div class="col-md-6 widget">
                    <div class="widget-body">
                        <p class="simplenav">
                            <a href="#">Home</a> |
                            <a href="about.html">About</a> |
                            <a href="sidebar-right.html">Sidebar</a> |
                            <a href="contact.html">Contact</a> |
                            <b><a href="signup.html">Sign up</a></b>
                        </p>
                    </div>
                </div>

                <div class="col-md-6 widget">
                    <div class="widget-body">
                        <p class="text-right">
                            Copyright &copy; 2014, Your name. Designed by <a href="http://gettemplate.com/"
                                                                             rel="designer">gettemplate</a>
                        </p>
                    </div>
                </div>

            </div> <!-- /row of widgets -->
        </div>
    </div>
</footer>



<script src="{% static 'maintenance/js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'maintenance/plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>

<script src="{% static 'maintenance/js/headroom.min.js' %}"></script>
<script src="{% static 'maintenance/js/jQuery.headroom.min.js' %}"></script>
<script src="{% static 'maintenance/js/template.js' %}"></script>

<script src="{% static 'maintenance/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js' %}"></script>
<script src="{% static 'maintenance/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>

<script>
    $(function () {
        $('#id_date').datepicker({
            format: 'yyyy-mm-dd',
            startDate: '0',
            language: "zh-CN",
            autoclose: true
        });

    })
</script>

<script type="text/javascript">
    var DELETE_ID;
    var EDIT_ID;

    $(function () {
        bindBtnSaveEvent();
        bindBtnDeleteEvent();
        bindBtnConfirmDeleteEvent();
        bindBtnEditEvent();
    })

    function bindBtnSaveEvent() {
        $("#btnSave").click(function () {
            //清除错误信息
            $(".error-msg").empty();
            doEdit();

        });
    }

    function doEdit() {
        //点击保存按钮，保存到数据库（添加的Ajax请求）
        $.ajax({
            url: "/repair/edit/?uid=" + EDIT_ID,
            type: "post",
            data: $('#formAdd').serialize(),
            dataType: 'JSON',
            success: function (res) {
                if (res.status) {
                    //清空表单,$("#formAdd")是jQuery对象->$("#formAdd")[0]是DOM对象
                    $("#formAdd")[0].reset();
                    //关闭对话框
                    $("#myModal").modal('hide');
                    //刷新页面
                    location.reload();
                } else {
                    if (res.tip) {
                        alert(res.tip);
                    } else {
                        //把错误信息显示在对话框中
                        $.each(res.error, function (name, errorlist) {
                            $("#id_" + name).next().text(errorlist[0]);
                        })
                    }
                }
            }
        })
    }


    function bindBtnDeleteEvent() {
        $(".btn-delete").click(function () {
            //显示删除对话框
            $("#deleteModal").modal('show');

            //获取当前行的ID并赋值给全局变量
            DELETE_ID = $(this).attr('uid');

        });
    }

    function bindBtnConfirmDeleteEvent() {
        $('#btnConfirmDelete').click(function () {
            //点击确认删除按钮，将全局变量中ID发送到后台
            $.ajax({
                url: '/repair/delete/',
                type: 'GET',
                data: {
                    uid: DELETE_ID,
                },
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        //隐藏删除框
                        $("#deleteModal").modal('hide');
                        //要删除的ID置空
                        DELETE_ID = 0;
                        //页面上将当前一行数据删除
                        location.reload()
                    } else {
                        // 删除失败
                        alert(res.error);
                    }

                }


            })
        });
    }


    function bindBtnEditEvent() {
        $(".btn-edit").click(function () {
            //清空对话框中的数据
            $("#formAdd")[0].reset();

            var uid = $(this).attr('uid');
            EDIT_ID = uid

            //发送Ajax去后台获取当前行的相关数据-> /order/detail/?uid=123
            $.ajax({
                url: '/repair/detail/',
                type: "get",
                data: {
                    uid: uid
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        //将数据赋值到对话框中的标签中
                        $.each(res.data, function (name, value) {
                            $('#id_' + name).val(value) //给input框赋值
                        })
                        //成功之后再显示对话框
                        //点击编辑，出来对话框
                        $('#myModal').modal('show');
                    } else {
                        alert(res.error);
                    }
                }
            })
        });
    }


</script>


</body>
</html>